<template>
  <div>
    <div>
      <el-input style="width: 200px" placeholder="请输入文件名" suffix-icon="el-icon-search" v-model="query.fileName"
                class="ml-5 mr-5"></el-input>
      <el-input style="width: 200px" placeholder="请输入文件类型" suffix-icon="el-icon-message" v-model="query.fileType"
                class="ml-5 mr-5"></el-input>
      <el-input style="width: 200px" placeholder="请输入用户id" suffix-icon="el-icon-phone-outline"
                v-model="query.fileUserId"
                class="ml-5 mr-5"></el-input>
      <el-button type="primary" @click="loadBtn">搜索</el-button>
      <el-button type="warning" @click="reset">重置</el-button>
      <el-button type="primary"  style="float: right;margin-right: 5px" @click="myShare">我的分享<a class="defined-icon-share"/></el-button>
      <el-button type="primary"  style="float: right;margin-right: 5px" @click="heat">热门推荐<a class="defined-icon-fire"/></el-button>

    </div>

    <!--        列表-->
    <el-table :data="fileData" stripe border :header-cell-class-name="headerBg"
              style="margin-top: 10px"
              @selection-change="handleSelectionChange">
      <el-table-column type="selection"></el-table-column>
      <el-table-column prop="fileName" label="文件名" width="200px"></el-table-column>
      <el-table-column prop="fileType" label="文件类型" width="100px"></el-table-column>
      <el-table-column prop="fileSize" label="文件大小 (兆)" width="100px"></el-table-column>
      <el-table-column prop="fileUserId" label="上传用户" width="80px"></el-table-column>
      <el-table-column prop="fileTime" label="上传时间" width="140px"></el-table-column>
      <el-table-column prop="fileDescription" label="描述"></el-table-column>
<!--      <el-table-column prop="123" label="下载" width="100px">-->
<!--        <template slot-scope="scope">-->
<!--          <el-button type="success" @click="downloadBtn(scope.row.fileName)">下载 <i class="el-icon-download"></i>-->
<!--          </el-button>-->
<!--        </template>-->
<!--      </el-table-column>-->

      <el-table-column label="操作"
                       align="center"
                       fixed="right"
                       width="190px">
        <template slot-scope="scope">
          <el-button type="warning" slot="reference" @click="shareBtn(scope.row.fileName)"
                     v-if="scope.row.fileUserId == userID">
            取消分享<i class="el-icon-share"></i></el-button>
          <el-button type="primary" style="margin-left: 5px" slot="reference" @click="collectBtn(scope.row)">收藏 <i
              class="el-icon-star-off"></i></el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--        分页-->
    <div class="pd-5">
      <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pageNum"
          :page-sizes="[5,10,15,20]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total=total>
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      heders: {
        token: JSON.parse(localStorage.getItem("user")).token
      },
      //文件数据
      fileData: [],
      //分页数据
      total: 0,
      pageNum: 1,
      pageSize: 5,

      //查询条件
      query: {
        fileName: '',
        fileType: '',
        fileUserId: '',
        fileTime: '',
        collectCount: '',
      },

      headerBg: 'headerBg',

      userID: JSON.parse(localStorage.getItem("user")).id,
    }
  },
  created() {
    this.load()
  },
  methods: {
    //加载文件信息
    load() {
      this.request.get('/course/page', {
        params: {
          pageNum: this.pageNum,
          pageSize: this.pageSize,

          fileName: this.query.fileName,
          fileType: this.query.fileType,
          fileUserId: this.query.fileUserId,
          fileTime: this.query.fileTime,
          collectCount: this.query.collectCount,
        }
      }).then(
          res => {
            if (res.code == 200) {
              this.fileData = res.data.records
              this.total = res.data.total
            }
          },
          Error => {
            console.log(Error)
          }
      )
    },

    // //下载
    // downloadBtn(fileName) {
    //   this.request.get("/HDFS/download/" + fileName).then(
    //       res => {
    //         if (res.code == 200) {
    //           this.$message.success("下载成功,默认路径D盘HDFS文件夹下")
    //
    //         }
    //       },
    //   )
    // },

    shareBtn(fileName) {
      this.request.get("/course/noShare/" + fileName).then(
          res => {
            if (res.code == 200) {
              this.$message.success("取消成功")
              this.load()
            }
          },
      )
    },

    //查询
    loadBtn() {
      //需将页面转为第一页，从头开始查询
      this.pageNum = 1
      this.load()
    },
    //重置
    reset() {
      this.query.fileName = '';
      this.query.fileType = '';
      this.query.fileUserId = '';
      this.query.fileTime = '';
      this.load()
    },
    //收藏
    collectBtn(row){
      this.request.get('/CU/update',{
        params:{
          fileName: row.fileName,
          fileUserId:row.fileUserId,
        }
      }).then(
          res => {
            if (res.code == 200) {
              this.$message.success(res.data)
            }else {
              this.$message.warning(res.msg)
            }
          }
      )
    },
    //我的分享
    myShare(){
      this.query.fileUserId=this.userID
      this.loadBtn()
      this.query.fileUserId=''
    },
    //热度排序
    heat(){
      //随便给一个值，让后端进行判断
      this.query.collectCount="1"
      this.loadBtn()
      this.query.collectCount=''
    },

    //编辑
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.load()
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.pageNum = val
      this.load()
    },
    //多选框事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
  },

}
</script>

<style scoped>

</style>